<template>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-form-item label="创建时间">
          <el-date-picker style="width: 240px" v-model="queryParams.time" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-form-item label="灾害类型" prop="damage">
          <el-select v-model="queryParams.damage" placeholder="灾害类型">
            <el-option v-for="item in this.damageInfoList" :key="item.name" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="card-box">
        <h3 style="text-align: center;">灾害预警数量统计</h3>
        <div ref="commandstats" style="height: 420px" />
      </el-col>
      <el-col :span="12" class="card-box">
        <h3 style="text-align: center;">灾害处理情况统计</h3>
        <div id="wastage" style="height: 420px" />
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getStatisticsInfo } from "@/api/system/warning";
import { listDamage } from "@/api/system/damage";

import * as echarts from "echarts";
export default {
  data() {
    return {
      damageInfoList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined
      },
      data: [
        100,
        200,
        300,
        400,
        500,
      ],
      dataInfo: [
        'A',
        'B',
        'C',
        'D',
        'E'
      ],
      echartsLoaded: false,
      tiao: null,
      // 统计命令信息
      commandstats: null,
      wastage: null,
      wastageDataInfo: null,
    };
  },
  created() {
    listDamage(this.queryParams).then(response => {
      this.damageInfoList = response.rows;
    })
  },
  mounted() {
    this.initData();
  },
  methods: {

    initData() {
      getStatisticsInfo(this.queryParams).then((response) => {
        this.wastageDataInfo = response;
        this.dataInfo = response.data.title
        this.data = response.data.titleInfo
        console.log("数据:" + JSON.stringify(response))
        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
        this.commandstats.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.dataInfo,
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.data,
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
            }
          ]
        });


        var chartDom = document.getElementById('wastage');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: response.data.damageDataMap
            }
          ]
        };

        option && myChart.setOption(option);

      })




    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('查询的数据' + JSON.stringify(this.queryParams))
      this.queryParams.pageNum = 1;
      this.initData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }

}
</script>
<style>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>

